<template>
    <div class="login-view">
        <div class="content-container">
            <div class="content-title">实训云</div>
            <div class="content-text">方便你的实训生活</div>
            <div class="content-text">实训 / 生活 / 软件 / IT </div>
        </div>
        <div class="form-container">
            <van-form @submit="onSubmit">
                <van-field v-model="username" name="userName" label="用户名" placeholder="请填写用户名"
                    :rules="[{ required: true, }]" />
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="请填写密码"
                    :rules="[{ required: true, }]" />
                <div style="margin-top: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
            <!-- <div class="go-find_it">忘记密码?点此找回</div> -->
        </div>
        <div class="more-login-container">
            <a href="http://github.com/">
                <div class="icon-box">
                    <img src="./../assets/imgs/icons/github.png" alt="" class="icon">
                </div>
            </a>
            <a href="https://im.qq.com/index">
                <div class="icon-box">
                    <img src="./../assets/imgs/icons/qq.png" alt="" class="icon">
                </div>
            </a>
            <a href="https://weixin.qq.com/">
                <div class="icon-box">
                    <img src="./../assets/imgs/icons/wechat.png" alt="" class="icon">
                </div>
            </a>
        </div>
        <div class="bottom-container">
            <div class="bottom-text">
                <span>登录/注册即同意</span>
                <span class="bottom-title">《实训云》</span>
                <span>用户服务协议</span>
            </div>
            <!-- <p class="keep_on_record">闽ICP备2022014758号</p> -->
        </div>
    </div>
</template>
  


<script>
import request from '../request/request';
import qs from 'qs';
export default {
    name: 'LoginView',
    components: {
    },
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        onSubmit(values) {
            // console.log('submit', values);
            // 发送请求
            request({
                url: "/login",
                method: "POST",
                data: values
            }).then(res => {
                // 储存token
                if (res.data.code == 0) {
                    localStorage.setItem("mytoken", res.data.msg);
                    this.$store.state.token = res.data.msg;
                    localStorage.setItem("user01", qs.stringify(res.data.data));
                    this.$store.state.user = res.data.data;
                    // 存储后端用户数据
                    this.$dialog.alert({
                        message: "登陆成功！",
                        theme: 'round-button',
                        confirmButtonColor: '#1989fa',
                    }).then((data) => {
                        this.$router.replace("/home/index")
                    })
                }
            }).catch(err => {
                // console.log(err)
                this.$dialog.alert({
                    message: err.data.msg,
                })
            })
        },
    },
    mounted() {
        // 设置高度等于窗口高度
        // document.getElementById("login-view").style.height = document.documentElement.clientHeight + "px";
        // document.getElementById("login-view").style.width = document.documentElement.clientWidth + "px";
        // 验证token是否存在以及是否过期
        if (this.$store.state.token != "") {
            // 若token有数据则去后端验证
            request({
                url: "/verfiToken",
                method: "POST",
                data: {
                    token: this.$store.state.token
                }
            }).then(res => {
                if (res.data.code == 0) {
                    localStorage.setItem("user01", qs.stringify(res.data.data));
                    this.$store.state.user = res.data.data;
                    // 验证成功免登陆跳转
                    this.$router.replace("/home/index")
                } else {
                    localStorage.setItem("mytoken", "")
                }
            }).catch(err => {
            })

        }

    },
}


</script>
  
<style scoped>
/* 主题div */
.login-view {
    width: 100%;
    height: 100vh;
    background-image: url(./../assets/imgs/login-back.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    overflow: hidden;
}

/* 宣传字体div */
.content-container {
    width: 100%;
    height: 200px;
    color: #fff;
    margin-left: 25%;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/* 宣传语标题 */
.content-title {
    font-size: 40px;
}

/* 宣传语内容 */
.content-text {
    font-size: 20px;
}

/* 登录表单盒子 */
.form-container {
    width: 250px;
    padding: 30px 20px 40px 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

/* 找回密码 */
.go-find_it {
    text-align: right;
    font-size: 16px;
    color: #fff;
    text-decoration: underline;
}

/* 快捷登录大div */
.more-login-container {
    width: 100%;
    height: 72px;
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
}

/* 快捷登录icon */
.icon-box {
    width: 60px;
    height: 60px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid #fff;
}

.icon {
    width: 50px;
    height: 50px;

}

.bottom-container {
    width: 100%;
    height: 10%;
    border-top: 1px solid #fff;
    font-size: 15px;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    color: #fff;

}

.bottom-title {
    color: #fff;
    font-weight: 500;
    text-decoration: underline;
}

/* 选中状态  */
/* .bottom-title:hover{
    color: #999;
} */
.keep_on_record {
    font-size: 10px;
    /* margin-top: -5px; */
}
</style>

